<script lang="ts" setup>
  import { GameProductGroup } from '@/types/game';
  import { computed, watch, ref } from 'vue';
  import _ from 'lodash';
  import { getGameDetail } from '@/api/game';

  const props = defineProps<{
    parentId?: string;
    groupList: GameProductGroup[];
  }>();

  const theParentId = computed(() => {
    return props.parentId;
  });

  const parentProductGroups = ref<GameProductGroup[]>([]);

  const initData = async () => {
    try {
      if (props.parentId) {
        const gameRes = await getGameDetail(props.parentId);
        if (gameRes.data.data.gameProductGroupVOS) {
          gameRes.data.data.gameProductGroupVOS.forEach((group) => {
            group.products = group.products.filter((p) => !p.disabled);
            group.products.forEach((product) => {
              if (product.rmbPrice) {
                product.rmbPrice /= 100;
              }
            });
            group.products.sort((p1, p2) => {
              if (p1.mustPay && !p2.mustPay) {
                return -1;
              }
              if (!p1.mustPay && p2.mustPay) {
                return 1;
              }
              return 0;
            });
          });
          parentProductGroups.value = gameRes.data.data.gameProductGroupVOS;
        } else {
          parentProductGroups.value = [];
        }
      } else {
        parentProductGroups.value = [];
      }
    } finally {
      // do nothing
    }
  };

  watch(
    [theParentId],
    async () => {
      await initData();
    },
    {
      immediate: true,
    }
  );

  const validGroupList = computed(() => {
    const list: GameProductGroup[] = [];
    props.groupList.forEach((group) => {
      const newGroup = _.cloneDeep(group);
      newGroup.products = newGroup.products.filter((i) => !i.disabled);
      newGroup.products.sort((p1, p2) => {
        if (p1.mustPay && !p2.mustPay) {
          return -1;
        }
        if (!p1.mustPay && p2.mustPay) {
          return 1;
        }
        return 0;
      });
      if (newGroup.products.length > 0) {
        list.push(newGroup);
      }
    });
    return list;
  });
</script>

<template>
  <div class="product-preview">
    <div class="product-preview-title">赛事报名</div>
    <div
      v-for="(group, groupIndex) in [...parentProductGroups, ...validGroupList]"
      :key="groupIndex"
      class="group"
    >
      <div class="group-name">{{ group.name }}</div>

      <div class="product-list">
        <div
          v-for="(product, productIndex) in group.products"
          :key="productIndex"
          class="product"
        >
          <div v-if="!product.mustPay" class="product-check">
            <a-radio />
          </div>

          <div class="product-info">
            <div class="product-name">
              {{ product.name }}
            </div>

            <div v-if="product.description" class="product-desc">
              {{ product.description }}
            </div>
          </div>

          <div class="product-price">
            <span>￥</span>
            {{ product.rmbPrice ? product.rmbPrice.toFixed(2) : '-' }}
          </div>
        </div>
      </div>

      <div class="group-desc">{{ group.description }}</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .product-preview {
    width: 375px;
    border: 1px solid var(--color-border-2);
    background: #fafafa;
  }
  .product-preview-title {
    background: #fff;
    line-height: 54px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 12px;
  }

  .group {
    margin: 0 12px 30px;

    &-name {
      font-weight: 500;
      margin: 0 0 6px 18px;
    }

    &-desc {
      margin: 6px 10px 0 18px;
      font-size: 12px;
      font-weight: 300;
      color: var(--color-text-2);
    }
  }

  .product {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px 8px;
    background: #fff;
    border-radius: 8px;
    &:last-child {
      margin-bottom: 0;
    }

    &-info {
      flex: 1;
      min-width: 0;
      margin: 0 10px;
    }

    &-desc {
      margin-top: 5px;
      color: var(--color-text-2);
      font-size: 12px;
    }

    &-price {
      font-size: 18px;
      color: rgb(var(--green-6));
      margin-right: 8px;
      span {
        font-size: 13px;
        color: var(--color-text-2);
      }
    }
  }
</style>
